<template>
	<view>
		<y-chat
			:userId="my.id"
			:value="val"
			:messageList="messageList"
			:updateList="updateList"
			:tagOptions="tagOptions"
			@send="send"
			@playPhoto="playPhoto"
			>			
		</y-chat>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 好友的信息
				friend: {
					fid: null,
					header: "",
					nickname: ""
				},
				//发送的内容
				val: "",
				// 自己的信息
				my: {
					id: this.$.getUser("uid"),
					nickname: this.$.getUser("nickname"),
					header: this.$.getImg(this.$.getUser("header"))
				},
				// 消息列表
				messageList: [],
				// 更新消息列表
				updateList: [],
				//标签列表
				tagOptions: {}
			}
		},
		onLoad(option) {
			this.friend.fid = option.fid;
			this.friend.header = option.header;
			this.friend.nickname = option.nickname;
			uni.setNavigationBarTitle({
				title: this.friend.nickname
			});
			
			// 展示历史聊天记录
			this.showHistory();
			
			// 监听一个聊天消息的接收事件
			uni.$on('chat-msg-' + this.friend.fid, (msg) => {
				console.log('监听到消息，参数 msg 为：', msg);
				// 接收到好友的消息
				var friendMsg = {
					userId: this.friend.fid,
					msgId: parseInt(Math.random() * 100000),
					name: this.friend.nickname,
					message: msg.type == 1 ? msg.msg : null,
					img: msg.type == 2 ? this.$.getImg(msg.msg) : null,
					time: new Date().getTime(),
					avator: this.friend.header
				};
				// 自动更新到消息列表
				this.updateList = friendMsg;
			});
		},
		onUnload() {
			// 页面卸载的方法 
			uni.$off('chat-msg-' + this.friend.fid);
		},
		methods: {
			send(val) {
				this.sendMsg2Friend(1,val);
			},
			// 展示历史聊天记录
			showHistory() {
				let historyMsg = this.ws.getCacheMsg(this.friend.fid);
				let msgArray = [];
				historyMsg.forEach((msg) => {
					// 当前消息是否是发送的消息还是接收的消息
					if (msg.from == this.my.id) {
						// 发送的消息
						var myMsg = {
							userId: this.my.id,
							msgId: parseInt(Math.random() * 100000),
							name: this.my.nickname,
							message: msg.type == 1 ? msg.msg : null,
							img: msg.type == 2 ? this.$.getImg(msg.msg) : null,
							time: new Date().getTime(),
							avator: this.my.header
						}
						msgArray.push(myMsg);
					} else {
						// 接收到的消息
						var friendMsg = {
							userId: this.friend.fid,
							msgId: parseInt(Math.random() * 100000),
							name: this.friend.nickname,
							message: msg.type == 1 ? msg.msg : null,
							img: msg.type == 2 ? this.$.getImg(msg.msg) : null,
							time: new Date().getTime(),
							avator: this.friend.header
						};
						msgArray.push(friendMsg);
					}
				});
				setTimeout(() => {
					this.messageList = msgArray;
				},0)
				
			},
			// 发送消息给好友	type 1-文本 2-图片
			sendMsg2Friend(type, data) {
				var myMsg = {
					userId: this.my.id,
					msgId: parseInt(Math.random() * 100000),
					name: this.my.nickname,
					message: type == 1 ? data : null,
					img: type == 2 ? this.$.getImg(data) : null,
					time: new Date().getTime(),
					avator: this.my.header
				}
				// 自动更新到消息列表
				this.updateList = myMsg;
				// 通过WebSocket连接，将消息发送给服务器，服务器转发给好友
				var msg = {
					action: 101,
					from: this.my.id,
					to: this.friend.fid,
					type: type,	// 1-文本消息 2-图片消息
					msg: data
				}
				
				// 将消息缓存到本地
				this.ws.cacheChatMsg(this.friend.fid, msg);
				
				this.ws.sendMsg(msg);
			},
			// 选择本地图片
			playPhoto(f) {
				//上传图片
				uni.uploadFile({
					url: "http://" + this.$.baseUrl + "/file/uploader",
					filePath: f.tempFilePaths[0],
					name: "file",
					success: (res) => {
						console.log("上传成功....", res.data);
						var result = JSON.parse(res.data);
						var imgName = result.data;
						console.log("imgName-->", imgName);
						// 给对方发送图片消息
						this.sendMsg2Friend(2, imgName);
					}
				});
			}
		}
	}
</script>

<style lang="scss">

</style>
